<template>
  <div class="block">
    <!--    <span class="demonstration">景观</span>-->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in url" :key="item">
        <el-image style="width: 100%; height: 400px" :src="item" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="home-top">
    <div class="home-wrapper">
      <el-row :gutter="10">
<!--        &lt;!&ndash;      住户&ndash;&gt;
        <el-col :span="3">
          <router-link to="/adminHousehold">
            <div class="grid-content bg-purple household">
              <p class="list_number">{{data.household}}</p>
              <p>住户登记数量</p>
            </div>
          </router-link>
        </el-col>
        &lt;!&ndash;      房产&ndash;&gt;
        <el-col :span="3">
          <router-link to="/adminProperty">
            <div class="grid-content bg-purple property">
              <p class="list_number">{{data.property}}</p>
              <p>房产登记数量</p>
            </div>
          </router-link>
        </el-col>
        &lt;!&ndash;      账号&ndash;&gt;
        <el-col :span="3">
          <router-link to="/adminAccount">
            <div class="grid-content bg-purple account">
              <p class="list_number">{{data.account}}</p>
              <p>系统账号登记数量</p>
            </div>
          </router-link>
        </el-col>
        &lt;!&ndash;      设备&ndash;&gt;
        <el-col :span="3">
          <router-link to="/adminEquipment">
            <div class="grid-content bg-purple equipment">
              <p class="list_number">{{data.equipment}}</p>
              <p>设备登记数量</p>
            </div>
          </router-link>
        </el-col>
        &lt;!&ndash;      车位&ndash;&gt;
        <el-col :span="3">
          <router-link to="/adminParking">
            <div class="grid-content bg-purple parking">
              <p class="list_number">{{data.parking}}</p>
              <p>车位登记数量</p>
            </div>
          </router-link>
        </el-col>-->
        <!--      投诉-->
        <el-col :span="8">
          <router-link to="/adminComplain">
            <div class="grid-content bg-purple complain">
              <p class="list_number">{{data.complain}}</p>
              <p>投诉未处理数量</p>
            </div>
          </router-link>
        </el-col>
        <!--      报修-->
        <el-col :span="8">
          <router-link to="/adminRepairs">
            <div class="grid-content bg-purple repair">
              <p class="list_number">{{data.repairs}}</p>
              <p>报修未处理数量</p>
            </div>
          </router-link>
        </el-col>
        <!--      月账单-->
        <el-col :span="8">
          <router-link to="/adminTotalFee">
            <div class="grid-content bg-purple fee">
              <p class="list_number">{{data.fee}}</p>
              <p>月账单未缴清数量</p>
            </div>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src
import { ref,onMounted } from 'vue'
import axios from "axios";
export default {
  name: 'HomeTop',
  setup(){
    const data=ref({
      household:0,
      property:0,
      account:0,
      equipment:0,
      parking:0,
      complain:0,
      repairs:0,
      fee:0
    })
    const url=ref([
        "https://www.gcu.edu.cn/_upload/article/images/18/0d/d6c941034a8b9cb11e87f16d7b3a/cb53d5a4-018c-46d2-9b41-94d84b24f22e.png",
        "https://www.gcu.edu.cn/_upload/article/images/96/1b/1b460a9a482fb9f99a54628097d9/612cb63f-5800-4636-bf31-0e1fd383b217.png",
        "https://www.gcu.edu.cn/_upload/article/images/db/5b/0ee0b5d04630a2128974a57334bb/b092bcec-6dbd-476e-aa39-ac46717cbd39.png",
        "https://www.gcu.edu.cn/_upload/article/images/fa/ba/5d5b576d4b3ba3f169267c31e686/f55e5937-2419-47a7-a349-9c9c790721a1.jpg"
    ])
    //挂载加载数据
    onMounted(()=>{
      axios.get('http://localhost:8085/getHomeAdminData').then(
          (resp)=>{
            data.value.household=resp.data.split("---")[0]
            data.value.property=resp.data.split("---")[1]
            data.value.account=resp.data.split("---")[2]
            data.value.equipment=resp.data.split("---")[3]
            data.value.parking=resp.data.split("---")[4]
            data.value.complain=resp.data.split("---")[5]
            data.value.repairs=resp.data.split("---")[6]
            data.value.fee=resp.data.split("---")[7]
          },
          ()=>{
          }
      )
    })
    return{
      data,
      url
    }
  }
}
</script>

<style scoped>
/*  头部信息*/
  .home-top {
	width: 100%;
	height: 150px;
	overflow: hidden;
  }
  .home-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*padding:15px;*/
    padding-bottom: 15px;
    padding-top: 15px;
  }
  /* 去除路由文字下标 */
  .router-link-active {
    text-decoration: none;
  }
  a {
    text-decoration: none;
  }
  .grid-content {
    max-height: 150px;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    padding: 15px 0;
    color: #fff;
  }
  .list_number{
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 5px;
  }
  .household {
	background-color: #409EFF;
  }
  .property{
	background-color: #409EFF;
  }
  .account{
	background-color: #409EFF;
  }
  .equipment  {
	background-color: #409EFF;
  }
  .parking {
	background-color: #409EFF;
  }
  .complain{
	background-color: #F56C6C;
  }
  .repair {
	background-color: #F56C6C;
  }
  .fee {
	background-color: #E6A23C;
  }

  /*轮播图*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #194d94;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #420317;
  }
</style>
